import React,{Component} from 'react'
import Home from './Home.module.css'
import {NavLink} from 'react-router-dom'
import * as api from '../../api/detailPro'
import {categoriesPro} from '../../data/proList'
export default class Product extends Component{
    constructor(props){
        super(props)
        this.state={
            list:[]
        }
    }
    componentDidMount(){
        console.log(categoriesPro)
        let arr = []
        categoriesPro.map(v=>{
            api.getProduct({per:5,product_category:v.id}).then((data)=>{
                console.log()
                let obj = data.data.products[0]
                obj.name = v.name
                obj._id = v.pid
                arr.push(obj)
                
                this.setState({
                    list:arr
                })
            })
        })
        
    }
    render(){
        return(
            <div className={Home.prod}>
                <h2>Product 产品</h2>
                <div className={Home.prodWrap}>
                    {
                        this.state.list.map((item,i)=>{
                            return(
                                 <NavLink style={{color:'#333',marginRight:'20px'}} key={i} to={{
                                    pathname: '/proList/'+item._id,
                                    search: '?cateId='+0,
                                }}>
                                    <img style={
                                        {width:'120px',height:'200px',
                                        marginRight:'12px'}
                                    } src={item.coverImg} />
                                    <span>{item.name}</span>
                                </NavLink>
                            )
                        })
                    }
                   
                    
                </div>
            </div>
        )
    }
    
}